<template>
    <canvas ref="canvas" class="three-canvas"></canvas>
</template>

<script setup lang="ts"> 
import * as THREE from 'three'
import {onMounted,  ref } from 'vue'
const canvas = ref<HTMLCanvasElement | null>(null)

onMounted(() => { 
    if (canvas.value==null) {
        return
    }
    canvas.value.width = window.innerWidth
    canvas.value.height = window.innerHeight

    //基本组合关系，scene和camera用来组合成renderer。在renderer的render中组装
    const renderer = new THREE.WebGLRenderer({
        canvas: canvas.value,
        antialias: true,
    });
    renderer.setSize(window.innerWidth, window.innerHeight);

    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 0, 50);
    camera.lookAt(0, 0, 0);

    const scene = new THREE.Scene();
    const material = new THREE.LineBasicMaterial({ color: 0x0000ff });

    const points = [];
    points.push(new THREE.Vector3(-10, 0, 0));
    points.push(new THREE.Vector3(0, 10, 0));
    points.push(new THREE.Vector3(10, 0, 0));

    const geometry = new THREE.BufferGeometry().setFromPoints(points);
    const line = new THREE.Line(geometry, material);
    scene.add(line);

    renderer.render(scene, camera);

})


</script>

<style scoped>
.three-canvas {
    background-color: black;
}
</style>